<template>
    <div class="recommend">
        <div class="recommend-title">热销推荐</div>
        <ul>
            <li class="lists" v-for="item in recommendList" :key="item.id">
                <div class="lists-img-wrapper">
                    <img class="lists-img" :src="item.imgUrl" alt="">
                </div>
                <div class="lists-info">
                    <p class="lists-title">{{item.title}}</p>
                    <p class="lists-text">{{item.text}}</p>
                    <p class="lists-price">查看详情</p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name:"HomeRecommend",
    data () {
        return {
            recommendList:[
                {
                    id:"001",
                    imgUrl:"http://img1.qunarzz.com/sight/p0/1902/2a/2aca8415d291e5d3a3.img.jpg_200x200_4d15f937.jpg",
                    title:"青岛中心酒店",
                    text:"集洗浴，酒店，餐饮，汗蒸为一体的休闲浴场"
                },
                {
                    id:"002",
                    imgUrl:"http://img1.qunarzz.com/sight/p0/1902/2a/2aca8415d291e5d3a3.img.jpg_200x200_4d15f937.jpg",
                    title:"青岛中心酒店",
                    text:"集洗浴，酒店，餐饮，汗蒸为一体的休闲浴场"
                },
                {
                    id:"003",
                    imgUrl:"http://img1.qunarzz.com/sight/p0/1902/2a/2aca8415d291e5d3a3.img.jpg_200x200_4d15f937.jpg",
                    title:"青岛中心酒店",
                    text:"集洗浴，酒店，餐饮，汗蒸为一体的休闲浴场"
                },
            ]
        }
    }
}
</script>
<style lang="scss" scoped>
    .recommend{
        .recommend-title{
            padding: 20px 0;
            background: #eee;
            text-indent:10px;
            margin-top: 10px;
        }
        .lists{
            display: flex;
            justify-content: space-between;
            height: 100px;
            background-color: #fff;
            border-bottom: 1px solid #eee;
            .lists-img-wrapper{
               width: 100px;
            //    height: 94px;
                line-height: 100px;
                text-align: center;
               .lists-img{
                vertical-align: middle;
                width: 70px;
                height: 70px;
               }
            }
            .lists-info{
                flex:1;
                padding: 5px;
                p,button{
                    line-height: 30px;
                    font-size: 12px;
                    transform: scale(0.9);
                }
                .lists-title{
                    font-size: 10px;
                }
                .lists-text{
                    color: #ccc;
                }
                .lists-price{
                    color:#ff9300
                }
            }
        }
    }
</style>